<?php
// //定义相册数组
$image_data = array(
    1 => array('photos/n1.jpeg'),
    2 => array('photos/n2.jpeg'),
    3 => array('photos/n3.jpeg'),
    4 => array('photos/n4.jpeg'),
    5 => array('photos/n5.jpeg')
);
// //步骤2：设置分页
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$page = max($page,1);
$page = min($page,count($image_data));
$pre_page = $page -1;
$next_page = $page +1;

//  步骤3   历史记录  保存cookie字符串   显示cookie_arr    key  /页码page
$cookie_arr = array();
if ($_COOKIE["history"]){ // （2）有浏览历史
    $cookie_arr = explode(",", $_COOKIE["history"]);
    foreach ($cookie_arr as $k => $v){
        if ($v == $page){
            unset($cookie_arr[$k]);
        }
    }
    $cookie_arr[] = $page;
    
    setcookie("history",implode(",",$cookie_arr));
    
    if (count($cookie_arr)>2){
        array_shift($cookie_arr);
    }
}
else{//首次进入
    setcookie("history",$page);
    $cookie_arr[] = $page;
}
krsort($cookie_arr);

if(isset($_GET['action'])){
    if($_GET['action'] == "clear"){
        setcookie("history","",time()-1);
        $cookie_arr = array();
    }
}
if($page == 1){
    $next ="查看下一条";
    $pre = "没有上一条";
    $img="photos/n1.jpeg";
}
elseif ($page == 5){
    $next="没有下一条";
    $pre = "查看上一条";
    $img=$image_data[$page][0];
}
else{
    $next ="查看下一条";
    $pre = "查看上一条";
    $img=$image_data[$page][0];
}
?>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>查看照片</title>
</head>
<style type = "text/css">
    body{background-color:#ededed;}
    .div_1{
        width:1200px;
        background-color:white;
    	margin:0 auto;
    	border:1px solid #a7abb3;
        }
    .div_2{
	   text-align:center; 
       height:40px;
       line-height:20px;
    }
    .crumb{
        background-color:#ededed;
    	border-top:1px solid #a7abb3;
    	height:40px;
    	line-height:40px;
        }
     .div_3{
	   background-color:white;
     	padding:5px
     }
     .div_l{
     	width:300px;
     	height:280px;
     	text-align:center;
     	float:right;
        margin-top:150px;
     }
    .div_c{
    	width:600px;
    	height:300px;
    	float:right;
    	text-align:center;
    	margin-top:60px;
     }
    .div_r{
    	width:300px;
    	height:280px;
    	text-align:center;
    	margin-top:150px;
     }
     .div_4{
     	height:80px;
	    /*margin-left:350px; */
     	padding-top:12px;
     	text-align:center;
     }
       a{
			text-decoration: none;
			color: grey;
		}
		a:hover{
			text-decoration: underline;
			color: black;
		}
		a:active{
			color: red;
		}
</style>
<body>
	<div class="div_1">
		<div class="div_2"><h2 >查看照片</h2></div>
		<div class="crumb">
			当前位置：我的相册&nbsp;&gt;&nbsp;0<span><?=$page?></span>（返回列表）
		</div>
		<div class="div_3">
			<div class="div_l">
			<img src="<?=$image_data[$page+1][0]?>" width="250px" height="100px"/>
					<br><br>
				<a href="?page=<?=$next_page?>"><?= $next ?></a>
			</div>
			<div class="div_c">
				<img src="<?=$img?>" width="600px" height="300px">
			</div>
			<div class=div_r>
			<img src="<?=$image_data[$page-1][0]?>" width="250px" height="100px"/>
					<br><br>
				<a href="?page=<?=$pre_page?>"><?= $pre?></a>
			</div>
		</div>
		<div class="crumb">
			浏览历史记录：<a href="?action=clear">（清除历史）</a>
		</div>
		<div class="div_4">
			<?php 
			foreach ($cookie_arr as $k => $v)
			{
			?>
				<img src="<?= $image_data[$v][0]?>" width="120px" height="68px"/>
			<?php 
			}
			?>
		</div>
	</div>
</body>
</html>